<template>
	<view class="nl-group-chat-avatar__wrap" :style="wrapStyle">
		<view class="nl-group-chat-avatar" :style="avatarStyle">
			<view v-if="length === 5 || length === 6" class="nl-group-chat-avatar__placeholder"></view>
			<image :class="imgClass" :style="{ borderRadius: imgBorderRadius }" :mode="mode" :src="item" v-for="(item, index) in imgList" :key="index"></image>
			<view v-if="length === 5 || length === 6" class="nl-group-chat-avatar__placeholder"></view>
		</view>
		<view v-if="isDot" class="nl-group-chat-avatar__wrap-dot" :style="dotStyle"></view>
	</view>
</template>
<script>
	export default {
		props: {
			imgs: {
				type: Array,
				default: () => [],
			},
			size: {
				type: [String, Number],
				default: 46,
			},
			round: {
				type: [String, Number],
				default: 4,
			},
			padding: {
				type: [String, Number],
				default: 1.5,
			},
			backgroundColor: {
				type: String,
				default: '#dddbd9',
			},
			imgRound: {
				type: [String, Number],
				default: 0,
			},
			mode: {
				type: String,
				default: 'scaleToFill',
			},
			isDot: {
				type: Boolean,
				default: false,
			},
			dotSize: {
				type: [String, Number],
				default: 10,
			},
			dotColor: {
				type: String,
				default: '#fa5151',
			},
			dotOffset: {
				type: Array,
				default: () => [-4, -4],
			},
		},
		computed: {
			imgList() {
				return this.imgs.length > 9 ? this.imgs.slice(0, 9) : this.imgs
			},
			length() {
				return this.imgList.length
			},
			imgClass() {
				return `nl-group-chat-avatar__img${this.length}`
			},
			imgBorderRadius() {
				return this.addUnit(this.imgRound)
			},
			wrapStyle() {
				const size = this.addUnit(this.size)
				return `width: ${size};height: ${size}`
			},
			avatarStyle() {
				const size = this.addUnit(this.size)
				const borderRadius = this.addUnit(this.round)
				const padding = this.addUnit(this.padding)
				return `width: ${size};height: ${size};background-color:${this.backgroundColor};border-radius:${borderRadius};padding:${padding}`
			},
			dotStyle() {
				const size = this.addUnit(this.dotSize)
				const top = this.addUnit(this.dotOffset[0])
				const right = this.addUnit(this.dotOffset[1])
				return `width: ${size};height: ${size};background-color:${this.dotColor};top:${top};right:${right}`
			},
		},
		methods: {
			isNumber(value) {
				return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value)
			},
			addUnit(value = 'auto') {
				value = String(value)
				return this.isNumber(value) ? `${value}px` : value
			},
		},
	}
</script>
<style scoped>
	.nl-group-chat-avatar__wrap {
		position: relative;
	}
	.nl-group-chat-avatar__wrap-dot {
		position: absolute;
		border-radius: 50%;
	}
	.nl-group-chat-avatar {
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
	}
	.nl-group-chat-avatar__placeholder {
		width: 90%;
		height: 15%;
	}

	.nl-group-chat-avatar__img1 {
		width: 100%;
		height: 100%;
	}
	.nl-group-chat-avatar__img2,
	.nl-group-chat-avatar__img3,
	.nl-group-chat-avatar__img4 {
		width: 48%;
		height: 48%;
	}

	.nl-group-chat-avatar__img3:nth-child(1) {
		margin: 0 20%;
	}
	.nl-group-chat-avatar__img5,
	.nl-group-chat-avatar__img6,
	.nl-group-chat-avatar__img7,
	.nl-group-chat-avatar__img8,
	.nl-group-chat-avatar__img9 {
		width: 31%;
		height: 31%;
	}
	.nl-group-chat-avatar__img5:nth-child(2) {
		margin-left: 16.6666666%;
	}
	.nl-group-chat-avatar__img5:nth-child(3) {
		margin-right: 16.6666666%;
	}
	.nl-group-chat-avatar__img7:nth-child(1) {
		margin: 0 30%;
	}
	.nl-group-chat-avatar__img8:nth-child(1) {
		margin-left: 16.6666666%;
	}
	.nl-group-chat-avatar__img8:nth-child(2) {
		margin-right: 16.6666666%;
	}
</style>
